<script setup lang="ts">
// 视频播放页面
import { ref } from 'vue'
import { onMounted, onBeforeUnmount } from '@vue/runtime-core'
import { useRoute, useRouter } from 'vue-router'
import { ElIcon, ElSlider, ElButton, ElDrawer, ElInput } from 'element-plus'
import { VideoPlay, VideoPause, FullScreen, Volume, VolumeMuted, Back, Comment, Star, StarFilled, Share } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 视频播放相关数据
const videoPlayer = ref({
  id: 1,
  title: 'Vue 3实战教程 - 从入门到精通',
  videoUrl: 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4',
  cover: 'https://picsum.photos/800/450?random=1',
  duration: 5130, // 秒
  currentTime: 0,
  volume: 80,
  isPlaying: false,
  isMuted: false,
  isFullscreen: false
})

// 评论相关数据
const comments = ref([
  {
    id: 1,
    author: '前端小智',
    avatar: 'https://picsum.photos/40/40?random=101',
    content: '这个Vue 3教程真的很不错，讲解得很详细，适合初学者入门。',
    time: '2小时前',
    likes: 25
  },
  {
    id: 2,
    author: 'UI设计师',
    avatar: 'https://picsum.photos/40/40?random=102',
    content: '感谢分享，学到了很多Element Plus的使用技巧。',
    time: '1天前',
    likes: 18
  },
  {
    id: 3,
    author: '状态管理师',
    avatar: 'https://picsum.photos/40/40?random=103',
    content: '希望后续能有更多关于Pinia状态管理的深入内容。',
    time: '3天前',
    likes: 12
  }
])

// 控制状态
const drawerVisible = ref(false)
const newComment = ref('')
const isLiked = ref(false)

// 格式化时间
const formatTime = (seconds: number) => {
  const h = Math.floor(seconds / 3600)
  const m = Math.floor((seconds % 3600) / 60)
  const s = Math.floor(seconds % 60)
  return [h, m, s]
    .map(v => v < 10 ? '0' + v : v)
    .filter((v, i) => v !== '00' || i > 0)
    .join(':')
}

// 播放/暂停
const togglePlay = () => {
  videoPlayer.value.isPlaying = !videoPlayer.value.isPlaying
}

// 静音/取消静音
const toggleMute = () => {
  videoPlayer.value.isMuted = !videoPlayer.value.isMuted
}

// 全屏
const toggleFullscreen = () => {
  videoPlayer.value.isFullscreen = !videoPlayer.value.isFullscreen
}

// 时间更新
const onTimeUpdate = (value: number) => {
  videoPlayer.value.currentTime = value
}

// 音量更新
const onVolumeChange = (value: number) => {
  videoPlayer.value.volume = value
}

// 点赞/取消点赞
const toggleLike = () => {
  isLiked.value = !isLiked.value
}

// 发布评论
const publishComment = () => {
  if (newComment.value.trim() === '') return
  
  comments.value.unshift({
    id: comments.value.length + 1,
    author: '我',
    avatar: 'https://picsum.photos/40/40?random=200',
    content: newComment.value,
    time: '刚刚',
    likes: 0
  })
  
  newComment.value = ''
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 分享视频
const shareVideo = () => {
  drawerVisible.value = true
}

onMounted(() => {
  // 可以在这里通过route.params.id获取视频ID并请求播放数据
  console.log('播放视频ID:', route.params.id)
})

onBeforeUnmount(() => {
  // 清理工作
})
</script>

<template>
  <div class="player-container">
    <!-- 顶部控制栏 -->
    <div class="player-header">
      <el-button 
        icon="Back" 
        circle 
        @click="goBack"
        class="back-button"
      />
      <h2 class="video-title">{{ videoPlayer.title }}</h2>
    </div>
    
    <!-- 视频播放器 -->
    <div class="video-player">
      <div class="player-wrapper">
        <video 
          :src="videoPlayer.videoUrl" 
          class="video-element"
          :poster="videoPlayer.cover"
          @click="togglePlay"
        />
        
        <!-- 播放控制遮罩 -->
        <div class="player-overlay" @click="togglePlay">
          <el-icon 
            v-if="!videoPlayer.isPlaying" 
            class="play-icon"
          >
            <VideoPlay />
          </el-icon>
        </div>
      </div>
      
      <!-- 播放控制栏 -->
      <div class="player-controls">
        <!-- 播放/暂停按钮 -->
        <el-button 
          :icon="videoPlayer.isPlaying ? VideoPause : VideoPlay" 
          circle 
          @click="togglePlay"
          class="control-button"
        />
        
        <!-- 时间显示 -->
        <div class="time-display">
          {{ formatTime(videoPlayer.currentTime) }} / {{ formatTime(videoPlayer.duration) }}
        </div>
        
        <!-- 进度条 -->
        <div class="progress-container">
          <el-slider 
            v-model="videoPlayer.currentTime" 
            :max="videoPlayer.duration" 
            :show-tooltip="false"
            @change="onTimeUpdate"
            class="progress-slider"
          />
        </div>
        
        <!-- 音量控制 -->
        <el-button 
          :icon="videoPlayer.isMuted ? VolumeMuted : Volume" 
          circle 
          @click="toggleMute"
          class="control-button volume-button"
        />
        
        <div class="volume-slider-container">
          <el-slider 
            v-if="!videoPlayer.isMuted" 
            v-model="videoPlayer.volume" 
            :max="100" 
            vertical 
            height="80px"
            class="volume-slider"
          />
        </div>
        
        <!-- 全屏按钮 -->
        <el-button 
          icon="FullScreen" 
          circle 
          @click="toggleFullscreen"
          class="control-button"
        />
      </div>
    </div>
    
    <!-- 视频信息和评论 -->
    <div class="video-info-comments">
      <div class="video-actions">
        <el-button 
          :icon="isLiked ? StarFilled : Star" 
          :type="isLiked ? 'primary' : 'default'"
          @click="toggleLike"
        >
          点赞
        </el-button>
        <el-button icon="Comment">评论</el-button>
        <el-button icon="Share" @click="shareVideo">分享</el-button>
      </div>
      
      <!-- 评论区域 -->
      <div class="comments-section">
        <h3 class="comments-title">评论 ({{ comments.length }})</h3>
        
        <!-- 发布评论 -->
        <div class="comment-input">
          <el-input
            v-model="newComment"
            type="textarea"
            placeholder="请输入评论内容"
            :rows="3"
            class="comment-textarea"
          />
          <div class="comment-actions">
            <el-button 
              type="primary" 
              @click="publishComment"
              :disabled="newComment.trim() === ''"
            >
              发布评论
            </el-button>
          </div>
        </div>
        
        <!-- 评论列表 -->
        <div class="comments-list">
          <div 
            v-for="comment in comments" 
            :key="comment.id" 
            class="comment-item"
          >
            <div class="comment-avatar">
              <img :src="comment.avatar" alt="用户头像" />
            </div>
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-author">{{ comment.author }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
              <p class="comment-text">{{ comment.content }}</p>
              <div class="comment-footer">
                <el-button 
                  :icon="Star" 
                  size="small" 
                  type="info" 
                  plain
                  class="like-button"
                >
                  {{ comment.likes > 0 ? comment.likes : '点赞' }}
                </el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 分享抽屉 -->
    <el-drawer
      v-model="drawerVisible"
      title="分享视频"
      direction="btt"
      size="30%"
    >
      <div class="share-content">
        <p class="share-title">将视频分享给朋友</p>
        <div class="share-options">
          <div class="share-option">
            <el-button type="primary" plain icon="Link">复制链接</el-button>
          </div>
          <div class="share-option">
            <el-button type="success" plain icon="ChatLineRound">微信</el-button>
          </div>
          <div class="share-option">
            <el-button type="info" plain icon="Share">微博</el-button>
          </div>
          <div class="share-option">
            <el-button type="warning" plain icon="ChatRound">QQ</el-button>
          </div>
        </div>
        <div class="share-url">
          <el-input 
            :value="`https://example.com/player/${videoPlayer.id}`" 
            readonly
          >
            <template #append>
              <el-button>复制</el-button>
            </template>
          </el-input>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<style scoped>
.player-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.player-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #ebeef5;
}

.back-button {
  margin-right: 15px;
}

.video-title {
  font-size: 18px;
  font-weight: bold;
  flex: 1;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.video-player {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: #000;
}

.player-wrapper {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.player-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}

.player-wrapper:hover .player-overlay {
  opacity: 1;
}

.play-icon {
  font-size: 64px;
  color: white;
}

.player-controls {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

.control-button {
  margin-right: 10px;
}

.time-display {
  margin-right: 10px;
  font-size: 12px;
  min-width: 100px;
}

.progress-container {
  flex: 1;
  margin-right: 10px;
}

.progress-slider {
  width: 100%;
}

.volume-button {
  position: relative;
}

.volume-slider-container {
  position: absolute;
  bottom: 50px;
  right: 15px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 10px;
  border-radius: 4px;
  display: none;
}

.volume-button:hover + .volume-slider-container {
  display: block;
}

.video-info-comments {
  padding: 20px;
  background-color: #fff;
  overflow-y: auto;
}

.video-actions {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.comments-section {
  padding-top: 10px;
}

.comments-title {
  font-size: 18px;
  margin-bottom: 15px;
}

.comment-input {
  margin-bottom: 20px;
}

.comment-textarea {
  margin-bottom: 10px;
}

.comment-actions {
  text-align: right;
}

.comment-item {
  display: flex;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f5f7fa;
}

.comment-avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  margin-bottom: 5px;
}

.comment-author {
  font-weight: bold;
  margin-right: 10px;
  font-size: 14px;
}

.comment-time {
  color: #909399;
  font-size: 12px;
}

.comment-text {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.like-button {
  font-size: 12px;
}

.share-content {
  padding: 20px;
}

.share-title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

.share-options {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

.share-option {
  text-align: center;
}

.share-url {
  margin-top: 20px;
}
</style>